<style>
</style>

<template>
  <div class="function-head-tool-con">
    <Row type="flex" justify="space-between" style="margin-bottom: 24px;">
      <Col :span="12">
        <Button icon="plus" type="primary" @click="addFunctionModal.show = true">添加功能</Button>
      </Col>
    </Row>


    <!-- 添加功能 -->
    <Modal v-model="addFunctionModal.show" width="400">

      <p slot="header" style="text-align:center">
        <Icon type="information-circled" style="margin-right: 5px;"></Icon>
        <span>添加功能</span>
      </p>

      <div>
        <Form :model="addFunctionModal.form" label-position="top">
          <FormItem label="功能名称">
            <Input v-model="addFunctionModal.form.name" placeholder="请输入功能名称"/>
          </FormItem>
          <FormItem label="功能标识">
            <Input v-model="addFunctionModal.form.identifier" placeholder="请输入功能标识（英文）"/>
          </FormItem>
          <FormItem label="所属模块">
            <Select v-model="addFunctionModal.form.moduleId">
              <Option v-for="module in moduleList"
                      :key="module.id"
                      :value="module.id">{{module.name}}
              </Option>
            </Select>
          </FormItem>
          <FormItem label="备注">
            <Input v-model="addFunctionModal.form.remark" type="textarea"/>
          </FormItem>
        </Form>
      </div>

      <div slot="footer">
        <Button type="primary" :loading="addFunctionModal.loading" @click="handleAddFunctoin(addFunctionModal.form)"
                long>
          <span v-if="!addFunctionModal.loading">添加功能</span>
          <span v-else>请求提交中</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'

  export default {
    name: 'ModuleViewHeadTool',
    data() {
      return {
        // 添加模块模态框
        addFunctionModal: {
          show: false,
          form: {
            name: '',
            identifier: '',
            moduleId: null,
            remark: ''
          },
          loading: false
        }
      }
    },
    computed: {
      ...mapState('system', {
        moduleList: state => state.module.moduleList
      })
    },
    methods: {
      ...mapActions('system/module', [
        'listModule'
      ]),
      handleAddFunctoin(form) {
        this.addFunctionModal.loading = true;
        this.$emit('on-add-function', form, (status) => {
          if (status) {
            this.addFunctionModal.show = false
            Object.assign(this.$data.addFunctionModal.form, this.$options.data().addFunctionModal.form)
          }
          this.addFunctionModal.loading = false;
        });
      }
    },
    created() {
      this.listModule()
    }
  }
</script>
